<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>按钮的图标 Button icons-JQUERY MOBILE 1.0正式版中文手册</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script></script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/button/style/jqmapi.js" type="text/javascript"></script>
<div class="content">
<h1>给按钮添加图标 Adding Icons to Buttons</h1>
<hr style="color:#595959;" />
  <div class="desc">
<div> Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。</div>
  <div>给链接添加data-icon 属性，可以添加按钮的图标</div>
  </div>
  <p class="indent"><strong>html代码</strong></p>
  <div class="code">
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;&gt;Delete&lt;/a&gt;</div>
    	<p class="indent"><strong>带有图标的按钮：</strong></p>
		<img src="../../images/Button icons/Button icons_1.png" tppabs="http://www.jqmapi.com/images/Button%20icons/Button%20icons_1.png">
		<div class="desc">
		  <h2>图标 Icon set</h2>
		  <hr />
<div>data-icon属性可以被用来创建如下所示的图标</div>
<div><strong>左箭头</strong>data-icon="arrow-l"</div>
<div><strong>右箭头</strong>data-icon="arrow-r"</div>
<div><strong>上箭头</strong>data-icon="arrow-u"</div>
<div><strong>下箭头</strong>data-icon="arrow-d"</div>
<div><strong>删除 </strong>data-icon="delete"</div>
<div><strong>添加 </strong>data-icon="Plus"</div>
<div><strong>减少 </strong>data-icon="minus"</div>
<div><strong>检查</strong>data-icon="Check"</div>
<div><strong>齿轮 </strong>data-icon="gear"</div>
<div><strong>前进 </strong>data-icon="Forward"</div>
<div><strong>后退 </strong>data-icon="Back"</div>
<div><strong>网格 </strong>data-icon="Grid"</div>
<div><strong>五角?</strong>data-icon="Star"</div>
<div><strong>警告 </strong>data-icon="Alert"</div>
<div><strong>信息 </strong>data-icon="info"</div>
<div><strong>首页 </strong>data-icon="home"</div>
<div><strong>搜索 </strong>data-icon="Search"</div>

</div>
    	<hr />
		<div class="desc">
		  <h2>图标组 Icon set</h2>
<div> 默认情况下，所有按钮图标出现在按钮的文本的左侧。</div>
<div> 可以通过data-iconpos="top" / "bottom" 属性来覆盖此默认</div>
  <div class="code"> 
    <p> &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;right&quot;</strong>&gt;Delete&lt;/a&gt; </p>
  </div>
        <p class="indent"><strong>一个图标在右边的按钮：</strong></p>
  <img src="../../images/Button icons/Button icons_3.png" tppabs="http://www.jqmapi.com/images/Button%20icons/Button%20icons_3.png">
    <div>也可以用 data-iconpos="top"创建图标在文本上方的按钮</div>
	<p class="indent"><strong>一个图标在文字上方的按钮：</strong></p>    
     <img src="../../images/Button icons/Button icons_4.png" tppabs="http://www.jqmapi.com/images/Button%20icons/Button%20icons_4.png">
	<div>也可以用 data-iconpos="bottom"创建图标在文本下方的按钮</div>
	<p class="indent"><strong>一个图标在文字下方的按钮：</strong></p>    
     <img src="../../images/Button icons/Button icons_5.png" tppabs="http://www.jqmapi.com/images/Button%20icons/Button%20icons_5.png">
     
	<div>你可以通过data-iconpos="notext"创建一个只有图标的按钮。button插件会在屏幕上隐藏文本，但是会把文本作为title属性作为screen readers的问容和支持小提示的浏览器， 例如，把前例中的 data-iconpos="right"替换为data-iconpos="notext"</div>
  <div class="code"> 
    <p> &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;<strong> data-iconpos=&quot;notext&quot;</strong>&gt;Delete&lt;/a&gt; </p>
</div>
	<p class="indent"><strong>一个只有图标的按钮</strong></p>    
     <img src="../../images/Button icons/Button icons_9.png" tppabs="http://www.jqmapi.com/images/Button%20icons/Button%20icons_9.png">

  <h1>自定义图标 Custom Icons</h1>
<div>要使用自定义图标，指定一个唯一的data-icon 值（比如data-icon=“myapp-email  ”）?Jquery Mobile的button插件会生成一个class值添加上去，该值由ui-icon-与data-icon的值组合而成（ui-icon-myapp-email  ），然后在css中指定这个类的背景图片地址。为了保持视觉效果的一致，请使用png-8格式的白色8*18的透明图标</div>
  <h1>图标和地址 Icons and themes</h1>
<div> 在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示，也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子</div>

	<p class="indent"><strong>"A"主题下的图标按钮</strong></p>    
    <img src="../../images/Button icons/Button icons_6.png" tppabs="http://www.jqmapi.com/images/Button%20icons/Button%20icons_6.png">
	<p class="indent"><strong>"B"主题下的图标按钮</strong></p>    
    <img src="../../images/Button icons/Button icons_7.png" tppabs="http://www.jqmapi.com/images/Button%20icons/Button%20icons_7.png">
	<p class="indent"><strong>"C"主题下的图标按钮</strong></p>    
    <img src="../../images/Button icons/Button icons_8.png" tppabs="http://www.jqmapi.com/images/Button%20icons/Button%20icons_8.png">        
   </div> </div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



